<template>
    <div class="wrapper-home">
        <div class="left">
            <div class="leftHead">
                <h2>福利院商城</h2>
                <el-menu
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    class="el-menu-vertical-demo"
                    text-color="#fff"
                    @open="handleOpen"
                    @close="handleClose"
                    router
                >
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon><location /></el-icon>
                            <span>Dashboard</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/introduce">系统介绍</el-menu-item>
                            <el-menu-item index="/Dashboard">Dashboard</el-menu-item>
                            <el-menu-item index="/add">添加商品</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><location /></el-icon>
                            <span>首页配置</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/banner">轮播图配置</el-menu-item>
                            <el-menu-item index="2-2">热销商品配置</el-menu-item>
                            <el-menu-item index="2-3">新品上线配置</el-menu-item>
                            <el-menu-item index="2-4">为你推荐配置</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon><location /></el-icon>
                            <span>模块管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1">分类管理</el-menu-item>
                            <el-menu-item index="3-2">商品管理</el-menu-item>
                            <el-menu-item index="3-3">会员管理</el-menu-item>
                            <el-menu-item index="3-4">订单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon><location /></el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1">修改密码</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
                
            </div>
        </div>
        <div class="right">
            <div class="rightHead">

            </div>
            <div class="content">
                <div class="box">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  setup() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.wrapper-home {
  width: 100vw;
  height: 100vh;
  display: flex;
  .left {
    width: 200px;
    height: 100%;
    background: #545c64;
    .leftHead {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #ccc;
      line-height: 50px;
      text-align: center;
    }
  }
  .right {
    flex: 1;
    height: 100%;
    .rightHead{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ccc;
    }
    .content{
        width: 100%;
        height: calc(100% - 51px);
        box-sizing: border-box;
        padding: 15px;
        .box{
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 10px;
        } 
    }
  }
  ::v-deep .el-menu{
      width: 100%
  }
  
}
</style>